{% extends 'base.html' %}
{% block content %}

<div class="container py-4">
  <h2 class="mb-4 text-center fw-bold">💸 Expense Tracker Dashboard</h2>

  <!-- Summary Cards -->
  <div class="row mb-4">
    <div class="col-md-4">
      <div class="card text-white bg-primary shadow-sm">
        <div class="card-body text-center">
          <h5>Total Expenses</h5>
          <h3>₹{{ total }}</h3>
        </div>
      </div>
    </div>
  </div>

  <!-- Charts Section -->
  <div class="row">
    <div class="col-md-6 mb-4">
      <div class="card shadow-sm">
        <div class="card-header bg-light fw-bold">📊 Category-wise Expense</div>
        <div class="card-body">
          <canvas id="categoryChart" height="250"></canvas>
        </div>
      </div>
    </div>

    <div class="col-md-6 mb-4">
      <div class="card shadow-sm">
        <div class="card-header bg-light fw-bold">📅 Monthly Expense Overview</div>
        <div class="card-body">
          <canvas id="monthlyChart" height="250"></canvas>
        </div>
      </div>
    </div>
  </div>

  <!-- Expense Table -->
  <div class="card shadow-sm mt-4">
    <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
      <h5 class="mb-0">🧾 All Expenses</h5>
      <div>
        <a href="{% url 'add_expense' %}" class="btn btn-sm btn-success me-2">➕ Add Expense</a>
        <a href="{% url 'list_category' %}" class="btn btn-sm btn-secondary">📂 Manage Categories</a>
      </div>
    </div>
    <div class="card-body table-responsive">
      <table class="table table-hover table-bordered align-middle text-center">
        <thead class="table-dark">
          <tr>
            <th>#</th>
            <th>Title</th>
            <th>Category</th>
            <th>Amount (₹)</th>
            <th>Date</th>
            <th>Description</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          {% for exp in expenses %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ exp.title }}</td>
            <td>{{ exp.category.name }}</td>
            <td class="fw-bold text-success">₹{{ exp.amount }}</td>
            <td>{{ exp.date }}</td>
            <td>{{ exp.description|default:"-" }}</td>
            <td>
              <a href="{% url 'update_expense' exp.id %}" class="btn btn-sm btn-outline-primary">Edit</a>
              <a href="{% url 'delete_expense' exp.id %}" class="btn btn-sm btn-outline-danger"
                 onclick="return confirm('Are you sure you want to delete this expense?');">Delete</a>
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="7" class="text-muted text-center">No expenses found. Add your first one!</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  // Category Pie Chart
  const catCtx = document.getElementById('categoryChart');
  new Chart(catCtx, {
    type: 'pie',
    data: {
      labels: [{% for cat in category_data %}'{{ cat.category__name }}',{% endfor %}],
      datasets: [{
        label: 'Expenses by Category',
        data: [{% for cat in category_data %}{{ cat.total }},{% endfor %}],
        backgroundColor: [
          '#3498db', '#e74c3c', '#2ecc71', '#f1c40f', '#9b59b6', '#1abc9c', '#34495e'
        ],
        borderWidth: 2,
        borderColor: '#fff'
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: { position: 'bottom' },
        title: { display: true, text: 'Category-wise Expense' }
      }
    }
  });

  // Monthly Bar Chart
  const monthCtx = document.getElementById('monthlyChart');
  new Chart(monthCtx, {
    type: 'bar',
    data: {
      labels: [{% for m in monthly_data %}'{{ m.month_name }}',{% endfor %}],
      datasets: [{
        label: 'Monthly Expenses (₹)',
        data: [{% for m in monthly_data %}{{ m.total }},{% endfor %}],
        backgroundColor: '#2980b9',
        borderColor: '#1f618d',
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      scales: {
        y: { beginAtZero: true }
      },
      plugins: {
        legend: { display: false },
        title: { display: true, text: 'Monthly Expense Summary' }
      }
    }
  });
</script>


{% endblock %}